<template>
    <div class="flex h-[100px] bg-white">
        <div class="flex w-1/2 flex p-4 color-white" :style="{ background: color}">
            <div class="lh-[100%] flex items-center ">
                <Icon v-if="icon" :icon="icon" :size="18" class="mr-2" />
            </div>
            <div class="lh-[100%] flex items-center text-[16px]">{{ title }}</div>
        </div>
        <div class="w-1/2 p-4 text-right flex items-center justify-end">
           {{ prefix }} <span class="font-bold text-[16px]">{{ value }}</span> {{ suffix }}
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import Icon from '@/components/Icon/Icon.vue';

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  value: {    
    type: String,
    default: ''
  },
  unit: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: ''
  },
  fontColor: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    default: ''
  },
  prefix: {
    type: String,
  },
  suffix: {
    type: String,
  }
})
</script>